<%@ page import="pojo.Question" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 81116
  Date: 2023/12/9
  Time: 15:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增试卷</title>
    <jsp:include page="teacher_menu.jsp"></jsp:include>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 引入各种CSS样式表 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <%--    图标--%>
    <link rel="stylesheet" href="icon/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4336496_3iu2a7l8bg8.css">
    <!--引入jquery和bootstrap -->
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/laydate.js"></script>
    <link href="css/laydate.css" rel="stylesheet">

    <style>
        .content_input .my-select{
            margin-left: 10px;
            margin-top: 20px;
            float: left;
            width: 30%;
            height: 38px;
            border-radius: 5px;
            color: dimgray;
        }
        .content_input .search_btn{ /*按钮样式*/
            width: 80px;
            height: 40px;
            margin-top: 20px;
            margin-left: 30px;
            background-color:dodgerblue;
        }
        .content_input .search_btn:hover{ /*按钮覆盖样式*/
            background-color: #2e6da4;
            color: ivory;
        }
        * {
            box-sizing: border-box;
        }
        .input-content{
            margin-left: 25%;
            width: 1000px;
        }
        #add_paper {
            background-color: rgba(5,200,50,0.01);
            margin: 50px 15%;
            font-family: Raleway;
            padding: 40px;
            width: 70%;
            min-width: 200px;
            text-align: center;
            box-shadow: 1px 1px 1px 1px silver;
        }
        h1 {
            text-align: center;
        }
        input {
            padding: 20px;
            width: 80%;
            height: 70px;
            font-size: 17px;
            font-family: Raleway;
            border: 1px solid cornflowerblue;
        }

        /* 标记在验证时出错的输入框：*/
        input.invalid {
            background-color: #ffdddd;
        }

        /* 默认隐藏所有步骤： */
        .tab {
            display: none;
        }

        button {
            background-color: #4CAF50;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            font-size: 17px;
            font-family: Raleway;
            cursor: pointer;
        }

        button:hover {
            opacity: 0.8;
        }

        #prevBtn {
            background-color: #bbbbbb;
        }
        /* 用圆圈表示表格的步骤： */
        .step {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: darkseagreen;
            border: none;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.5;
        }

        .step.active {
            opacity: 1;
        }

        /* 标记已完成且有效的步骤：*/
        .step.finish {
            background-color: forestgreen;
        }
    </style>
</head>
<body>
<%
    String mess=(String)session.getAttribute("message");
    if(mess!=null && !"".equals(mess)){
%>
<script type="text/javascript">
    alert("<%=mess%>");
</script>
<%
        session.setAttribute("message", "");
    } %>
<div style="background-color: #66afe9;display: inline-block;margin-top: 10px;float: left;margin-left: 20%;height: 80px;width: 300px;text-align: center; border-radius:0px;">
    <h1 style="color:white;text-shadow: 2px 2px 2px dodgerblue;line-height: 40px;border-radius:2px;font-size: 25px">新增试卷</h1>
</div>
<div style="margin-left: 35%;margin-top:10px;width: 60%;height:80px;background-color: #66afe9; "></div>
<br>
<div class="input-content">
    <form id="add_paper" action="${pageContext.request.contextPath}/addPaper" method="post">
        <h1>新增试卷：</h1><br><br>
        <!-- One "tab" for each step in the form: -->
        <%
            String t_id=session.getAttribute("TEACHER_ID").toString();
        %>
        <div class="tab">
            <p>试卷名称：<input placeholder="请输入试卷名称" oninput="this.className = ''" name="p_name" id="p_name"></p><br>
            <p>出卷人ID：<input placeholder="请输入出卷人ID" oninput="this.className = ''" name="t_id" id="t_id" value="<%=t_id%>"></p>
        </div>
        <div class="tab">
            <p><input placeholder="请选择开始时间" oninput="this.className = ''" name="starttime" id="starttime" id="starttime"></p><br>
            <p><input placeholder="请选择结束时间" oninput="this.className = ''" name="endtime" id="endtime" id="endtime"></p>
        </div><br><br>
        <div style="overflow:auto;">
            <div style="float:right;">
                <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
            </div>
        </div>
        <!-- Circles which indicates the steps of the form: -->
        <div style="text-align:center;margin-top:40px;">
            <span class="step"></span>
            <span class="step"></span>
        </div>
    </form>
</div>


<script>
    var currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(currentTab); // Display the current tab

    function showTab(n) {
        // This function will display the specified tab of the form...
        var x = document.getElementsByClassName("tab");
        x[n].style.display = "block";
        //... and fix the Previous/Next buttons:
        if (n == 0) {
            document.getElementById("prevBtn").style.display = "none";
        } else {
            document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
            document.getElementById("nextBtn").innerHTML = "Submit";
        } else {
            document.getElementById("nextBtn").innerHTML = "Next";
        }
        //... and run a function that will display the correct step indicator:
        fixStepIndicator(n)
    }

    function nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName("tab");
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        currentTab = currentTab + n;
        // if you have reached the end of the form...
        if (currentTab >= x.length) {
            // ... the form gets submitted:
            document.getElementById("add_paper").submit();
            return false;
        }
        // Otherwise, display the correct tab:
        showTab(currentTab);
    }

    function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
            // If a field is empty...
            if (y[i].value == "") {
                // add an "invalid" class to the field:
                y[i].className += " invalid";
                // and set the current valid status to false
                valid = false;
            }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
            document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
    }

    function fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
        var i, x = document.getElementsByClassName("step");
        for (i = 0; i < x.length; i++) {
            x[i].className = x[i].className.replace(" active", "");
        }
        //... and adds the "active" class on the current step:
        x[n].className += " active";
    }
    //时间选择器
    laydate.render({
        elem: '#starttime'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#endtime'
        ,type: 'datetime'
    });
</script>

</body>
</html>
